<template>
  <div id="gm">  

    <el-form ref="form"  label-width="80px">           

 
        <el-row style="margin-bottom:10px;"> 
           <el-col :span="12">
             <div style="height:38px;line-height:38px;width:150px;"> 
                  <i class="el-icon-back" @click="goBack"></i> 
                  {{ $route.query.name }} 
                </div> 
            </el-col>
            <el-col :span="12" style="text-align: right;">
               <el-button class="custom_color_button" type="primary" @click="add_gm_but" >添加果米</el-button>
            </el-col>         
        </el-row>

    </el-form>

   <!-- 渲染数据list -->
   <operate-gm-list :data="data"> </operate-gm-list>
   
     <!-- 添加果米 -->
        <el-dialog title="添加果米" :visible.sync="add_gm_mtk"  width="30%">
            <div style="width:100%;"> 

              <el-form ref="form"   label-width="100px" style="width:100%;">
                
                <el-form-item label="选择类型">
                  <el-select  v-model="select_num" placeholder="请选择" >
                      <el-option  v-for="(item,index) in select_data" :key="index" :label="item.name" :value="item.id"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="果米数量">
                    <el-input v-model.number="price" placeholder="果米数量/请输入正数"></el-input>
                </el-form-item>                                   
            </el-form>

                <div style="text-align: center;width:50%;margin:auto;">
                    <el-button type="primary" style="width:80%;" @click="gm_but_qr">确认</el-button>
                </div>

            </div> 
        </el-dialog>


     
     <div style="margin-top:20px;text-align: center;">
      <el-pagination
        background
        @current-change="handleCurrentChange"
        :page-size="10"  
        layout="prev, pager, next, jumper"
        :total="count">
      </el-pagination>
    </div>

    <el-dialog title="用户验证" :visible.sync="user_test.user_mtk"  width="400px" >
          <el-form ref="form" :model="user_test"  label-width="100px" style="width:100%;">
                <el-form-item label="" label-width="0px">
                    <el-input v-model="user_test.password" placeholder="二级密码" ></el-input>
                </el-form-item>
                <el-form-item label="" label-width="0px" >
                    <div style="display:flex;">
                        <el-input v-model="user_test.phone" placeholder="手机验证码" style="flex:1;"></el-input>
                         <el-button class="code_but1 custom_color_button" type="primary"  @click="getCode_yz()" :disabled="user_test.disabled" style="margin-left:10px;">
                          {{ user_test.codeText }}
                        </el-button>
                    </div>
                </el-form-item>
                <div style="text-align: center;width:50%;margin:auto;margin-top:20px;">
                  <el-button type="primary" class="custom_color_button" style="width:100%;" @click="user_mtk_but">确认</el-button>
                </div>
         </el-form>
   </el-dialog> 
      
  </div>
</template>

<script>
import OperateGmList from '@/view/Member/OperateGmList'
export default {
  name: 'gm',
  data () {
    return {
      data:[],
      page:1,
      count:0,
      add_gm_mtk:false,
      price:'',
      select_data:[{"id":1,"name":"增加"},{"id":2,"name":"减少"}],
      select_num:1,
      user_test:{  //用户判定
            user_mtk:false, //用户判定模态狂
            codeText:'获取验证码', //获取验证码字
            totalTime:60,  //获取验证码秒
            disabled:false, //禁用获取验证码
            password:'', //二级密码
            phone:'',  //验证码
      },
      my_ctid:''
    }
  },
 components:{
    OperateGmList
  },
  created(){
     this.my_ctid = this.$route.query.ctid
     this.list_fun()
     
  },
  mounted (){
    
  },
  methods: {
     list_fun(){
          this.post("/operate_center/logListOfChangeKmb", {
              page:this.page,
              ctid:this.$route.query.ctid
	        }).then(res => {
            this.count = res.result.count
            this.data = res.result.list
            console.log(res)
         })
      },
    add_gm_but(){
        // this.add_gm_mtk = true
        this.user_test.user_mtk = true
        this.price = ''
        this.select_num = 1
    },
    user_mtk_but(){

        this.getCode_yz_qr().then(res => {
            console.log(res)
            if(res == 1){
               this.add_gm_mtk = true
            }
        })
  
    },
    gm_but_qr(){
      // this.$route.query.id
       
         
         if(Math.sign(this.price) != -1){
              
              this.post("/operate_center/changeKmb", {
                    ctid:this.my_ctid,
                    type:this.select_num,
                    price:this.price
              }).then(res => {

                    if(res.error_code == 0){
                      this.open1(res.result,'success')  //提示框
                      this.add_gm_mtk = false
                      this.list_fun()
                    }else {
                      this.open1(res.message,'warning')
                  }
              
                })

         }else{
                   this.open1('输入不能为负数','warning')
         }

      
    },
    goBack() {
        this.$router.go(-1)
    },
     handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
        this.page = val
         this.list_fun()
        console.log(`当前页: ${val}`);
      }
  }
}
</script>


<style scoped>


</style>
